<template>
  <vxe-modal v-model="dialogVisible" title="文件上传" show-footer>
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="uploadUrl"
      :auto-upload="false"
      :headers="headers"
      :on-success="uploadSuccess"
      :on-error="uploadError"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitUpload">确定</el-button>
    </div>
  </vxe-modal>
</template>

<script>
export default {
  name: 'ExcelImport',
  data() {
    return {
      url: '',
      dialogVisible: false
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
    uploadUrl() {
      return process.env.VUE_APP_BASE_API + this.url
    },
    headers() {
      const map = {}
      map[process.env.VUE_APP_TOKEN_NAME] = this.$store.state.user.token
      return map
    }
  },
  mounted() {
  },
  methods: {
    open(url) {
      this.url = url
      this.dialogVisible = true
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    uploadSuccess(data) {
      this.$message({ type: data.code === 200200 ? 'success' : 'error', message: data.msg || '上传成功' })
      if (data.code === 200200) {
        this.dialogVisible = false
        this.$emit('success', data)
      }
    },
    uploadError(err, file, fileList) {
      const errObj = JSON.parse(err.toString().replace('Error: ', ''))
      this.$message({ type: 'error', message: errObj.msg })
    }
  }
}
</script>

<style>

</style>
